<template>
  <div class="discover-content">
    <Header title="搜索"></Header>
    <div class="search-header">
      <van-search v-model="value" show-action placeholder="请输入搜索关键词" @search="onSearch">
        <template #action>
          <div @click="onClickButton">搜索</div>
        </template>
      </van-search>
    </div>
    <Content v-if="!search.data" ishow="search.detail"></Content>
    <div class="blog-content" v-else>
      <div class="card">
        <!-- {{search.detail}} -->
        <van-card @click="detailContent(item)" v-for="item in search.detail" :key="index" currency="⏲︎" :tag=item.heat
          :price=item.c_time :desc=item.description :title=item.title :thumb=item.picture>
          <template #tags>
            <van-tag plain type="primary">{{ item.tag_type }}</van-tag>
          </template>
        </van-card>
      </div>
    </div>
    <Footer></Footer>
  </div>
</template>

<script setup>
import Footer from '@/components/Footer.vue'
import Header from '@/components/Header.vue'
import Content from '@/components/Content.vue'
import { ref } from 'vue';
import axios from '@/api/index.js';
import { reactive} from 'vue';
import { watch } from 'vue';
import { useRouter } from 'vue-router';
import { provide } from 'vue';

const router=useRouter()

const search = reactive({
  data: null,
  detail:{}
})




const value = ref('');

const onSearch = (val) => console.log(val);;

console.log(search.detail);
// 搜索博客内容


const onClickButton = async () => {
  console.log(value.value)
  search.data = value.value
  const result = await axios.post('/blog/titleFindBlog', {
    title: search.data
  })
  search.detail = result.data
  console.log(result.data);
  console.log(search.detail);
};


console.log(search.detail);

const detailContent=(value)=>{
  // console.log(value);
  router.push({path:'/blogContentDetail',query:{id:value.id}})
}
</script>

<style lang="less" scoped></style>
